<?php
header('Content-Type: text/html; charset=utf-8');//设置字符集


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>选择充值金额</title>
    <meta name="description" content="jquery表单提交制作各大商城衣服尺寸选择勾选效果，点击购物车提交勾选尺寸value值。一款简单实用的衣服尺寸选择勾选效果。" />
</head>

<body>

<style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
    　
    　　　　
    　　
    body{background:#fff;font: normal 100% Helvetica, Arial, sans-serif;font-family:Helvetica,Arial,sans-serif,"宋体";color:#333;}
    .clear{display:block; clear:both;}
    .clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;}
    *html .clearfix{height:1%;}
    *+html .clearfix{height:1%;}
    a{color:#333;text-decoration:none;}
    a:hover{color:#990000;text-decoration:underline;}
    /* choose */
    .choose{width:100%;margin:50px auto 0 auto;border:solid 1px #ddd;padding:15px 0;}
    .choosetext{height:24px;padding:20px 0;font-size:16px;}
    .choosebox{padding:0 0 35px 0;margin-left: 6%}
    .choosebox li{float:left;margin-right:10px;display:inline;}
    .choosebox li a{float:left;background:#fff;margin: 10px 0;font-size:16px;border:1px solid #ccc;height:14px;line-height:14px;padding:15px 10px; display:block;}
    .choosebox li a.current{background:url(images/right-icon.gif) no-repeat 100% 100%;border:1px solid #A10000;}
    .choosebox li input{display:none;}
    /*
    .choose .btn-img{width:160px;height:50px;overflow:hidden;background:url(images/cart.gif) no-repeat;cursor:pointer;border:0;}
    */
    .choose .btn-img{
        background: #44B549;
        width: 70%;
        border: none;
    }
    .choose .btn-img span{display:block;
        font-size:18px;font-weight:800;
        color:#fff;font-family:"微软雅黑","宋体";
        line-height:50px;
    }
    .user_info{
        margin-top: 50px;
        padding-right: 5%;
    }
    .user{
        margin-left: 6%;
    }
    .user_input{
        width: 60%;
        padding-left: 5%;
        height: 40px;
    }
</style>
<form action="{:U('Pay/getBaseInfo')}" method="post">

<div class="user_info">
    <span class="user">游戏账号 : <input type="text" name="user" value="" class="user_input" placeholder="请输入游戏账号"/>
</div>
<div class="choose" id="dress-size" style="text-align: center;margin: 0,auto" >
        <div class="choosetext">充值金额：<span>未选择</span></div>
        <div class="choosebox" >
            <ul class="clearfix">
                <li>
                    <input type="radio" name="name" value="1" id="" />
                    <a href="javascript:void(0);" class="size_radioToggle"><span class="value"> 1 2 元 &nbsp; 120钻石</span></a>
                </li>
                <li>
                    <input type="radio" name="name" value="2" id="" />
                    <a href="javascript:void(0);" class="size_radioToggle"><span class="value"> 3 0 元 &nbsp; 300钻石</span></a>
                </li>
                <li>
                    <input type="radio" name="name" value="3" id="" />
                    <a href="javascript:void(0);" class="size_radioToggle"><span class="value"> 6 8 元 &nbsp; 680钻石</span></a>
                </li>
                <li>
                    <input type="radio" name="name" value="4" id="" />
                    <a href="javascript:void(0);" class="size_radioToggle"><span class="value">198元  1980钻石</span></a>
                </li>
                <li>
                    <input type="radio" name="name" value="5" id="" />
                    <a href="javascript:void(0);" class="size_radioToggle"><span class="value">328元 3280钻石</span></a>
                </li>
                <li>
                    <input type="radio" name="name" value="6" id="" />
                    <a href="javascript:void(0);" class="size_radioToggle"><span class="value">648元  6480钻石</span></a>
                </li>
            </ul>
        </div>
<!--
        <div><button type="submit" class="btn-img weixinPayBtn"  data-order_id="1"><span>立即购买</span></button></div>
-->
        <div><button type="submit" class="btn-img" ><span>立即购买</span></button></div>

</div><!--choose end-->
</form>
<script type="text/javascript" src="Public/simpleboot/weixing/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.choosebox li a').click(function(){
            var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev();
            var checkBox = thisToggle.prev();
            checkBox.trigger('click');
            $('.size_radioToggle').removeClass('current');
            thisToggle.addClass('current');
            return false;
        });
    });

    $(".choosebox li a").click(function(){
        var text = $(this).html();
        $(".choosetext span").html(text);
        $("#result").html("" + getSelectedValue("dress-size"));
    });

    function getSelectedValue(id){
        return
        $("#" + id).find(".choosetext span.value").html();
    }
</script>

</body>
</html>